<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>权限管理</span>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="权限名称">
          <el-input v-model="searchForm.menuName" placeholder="请输入权限名称" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable size="small">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom: 10px" @click="handleAdd">添加</el-button>
      <el-table :data="menuList" 
        style="width: 100%" 
        border  
        row-key="menuId">
        <el-table-column prop="menuName" label="权限名称" width="200px"></el-table-column>
        <el-table-column prop="icon" label="图标"></el-table-column>
        <el-table-column prop="orderNum" label="排序" width="60px"></el-table-column>
        <el-table-column prop="perms" label="权限标识" width="180px"></el-table-column>
        <el-table-column prop="path" label="组件路径"></el-table-column>
        <el-table-column prop="status" label="状态" width="70px">
          <template slot-scope="scope">
             {{scope.row.status==1?"停用":"正常"}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作"  width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="saveForm.menuId==null?'新增权限':'修改权限'" :visible.sync="dialogFormVisible">
        <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="90px" :inline="true">
          <el-form-item label="上级权限" prop="parentId">
            <treeselect 
              v-model="saveForm.parentId" 
              :normalizer="normalizeOptions" 
              placeholder="请选择上级权限" 
              :options="menuOptions"
              style="width:510px">
            </treeselect>
          </el-form-item>
          <el-form-item label="权限类型" prop="menuType" style="width:100%">
            <el-radio-group v-model="saveForm.menuType">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType != 'F'" label="菜单图标" prop="icon">
            <el-input v-model="saveForm.icon" autocomplete="off" style="width:510px"></el-input>
          </el-form-item>
          <el-form-item label="权限名称" prop="menuName">
            <el-input v-model="saveForm.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="saveForm.orderNum" 
              autocomplete="off" controls-position="right" style="width: 205px"></el-input-number>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType != 'F'" label="路由地址" prop="path">
            <el-input v-model="saveForm.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType == 'C'" label="组件路径" prop="component">
            <el-input v-model="saveForm.component" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType != 'M'" label="权限标识" prop="perms">
            <el-input v-model="saveForm.perms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType != 'F'" label="显示状态">
            <el-radio-group v-model="saveForm.visible" style="width: 205px">
              <el-radio label="0">显示</el-radio>
              <el-radio label="1">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="saveForm.menuType != 'F'" label="菜单状态">
            <el-radio-group v-model="saveForm.status">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      //查询的数据模型
      searchForm: {
        //过滤条件
        menuName: null,
        status: null,
      },
      //权限模型
      menuList:[],
      //权限树模型
      menuOptions:[],
      //控制对话框显示还是隐藏
      dialogFormVisible: false,
      //新增的数据模型
      saveForm: {
        menuId:null,
        parentId:null,
        menuName:null,
        menuType:'M',
        icon:null,
        orderNum:null,
        path:null,
        component:null,
        perms:null,
        visible:'0',
        status:'0',
      },
      //验证数据模型
      rules: {
        postCode: [
          { required: true, message: "请输入岗位编码！", trigger: "blur" },
        ],
        postName: [
          { required: true, message: "请输入岗位名称！", trigger: "blur" },
        ],
        postSort: [
          { required: true, message: "请输入序号！", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.doSearch();
    this.doTreeSelect();
  },
  methods: {
    //查询用户信息
    doSearch() {
      this.$axios.get("/api/sys/menu/list", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.menuList =  this.handleTree(res.data.data, 'menuId')
            console.log(this.menuList)
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询权限树
    doTreeSelect() {
      this.$axios.get("/api/sys/menu/treeselect")
        .then((res) => {
          if (res.data.code == 200) {
            this.menuOptions = [{ menuId: 0, menuName: '主类目', children: res.data.data}];
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //清空新增表单数据
    reset () {
      this.saveForm = {
        menuId:null,
        parentId:null,
        menuName:null,
        menuType:'M',
        icon:null,
        orderNum:null,
        path:null,
        component:null,
        perms:null,
        visible:'0',
        status:'0',
      };
    },
    //添加
    handleAdd() {
      //1.清空模型数据
      this.reset();
      //2.显示对话框
      this.dialogFormVisible = true;
    },
    //保存
    doSave() {
      this.$refs["saveForm"].validate((vali) => {
        if (vali) {
          //发送ajax请求
          this.$axios.post("/api/sys/menu/save", this.saveForm)
            .then((res) => {
              if (res.data.code == 200) {
                //1.关闭对话框
                this.dialogFormVisible = false;
                //2.友好提示
                this.$message.success(res.data.msg);
                //3.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    //编辑
    handleEdit(index, row) {
      //1.清空数据
      this.reset();
      //2.查询要修改的数据
      this.$axios.get("/api/sys/menu/view/"+row.menuId).then((res)=>{
         if(res.data.code==200){  
            this.saveForm=res.data.data;
         }else{
            this.$message.error(res.data.msg);
         }
      }).catch((err)=>{
        console.log(err);
      })
      //3.显示对话框
      this.dialogFormVisible=true;
    },
    //删除
    handleDelete(index, row) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //1.发送ajax请求
          this.$axios.delete("/api/sys/menu/del/"+row.menuId).then((res)=>{
              if (res.data.code == 200) {
                //1.友好提示
                this.$message.success(res.data.msg);
                //2.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
          }).catch((err)=>{
              console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 转换权限数据结构
    normalizeOptions(node) {
      if (node.children && !node.children.length) {
        // 去掉children=[]的children属性
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      }
    },
  },
}
</script>

<style scoped>
</style>

